<template>
  <el-table
    :data="tableRowLists"
    :span-method="mergeHanlder"
    border
    style="width: 100%">
    <el-table-column align="center" label="广告计划" min-width="300">
      <el-table-column align="center" label="选择" min-width="70" prop="all">
        <template #default="{row:{campaignIndex}}">
          <el-checkbox
            @change="parentChange($event,campaignIndex)"
            :indeterminate="tableData.campaignList[campaignIndex]?.indeterminate"
            v-model="tableData.campaignList[campaignIndex].checked"
            :disabled="tableData.campaignList[campaignIndex].disabled"/>
        </template>
      </el-table-column>
      <el-table-column label="广告计划信息" prop="planInfo" min-width="220">
        <template #default="{row:{campaignIndex}}">
          <div class="campaign-name">
            <div class="strong-text">计划名称：</div>
            <div>{{ tableData.campaignList[campaignIndex].campaign_name }}</div>
          </div>
          <div class="campaign-name">
            <div class="strong-text">营销目标：</div>
            <div>
              {{ tableData.marketing_goals }}
            </div>
          </div>
          <div class="campaign-name">
            <div class="strong-text">预算：</div>
            <el-tooltip
              v-if="tableData.campaignList[campaignIndex].day_budget_schedule.length"
              effect="light"
              placement="right"
            >
              <template #content>
                <div
                  :key="day"
                  class="day-budget-schedule"
                  v-for="(day,i) of tableData.campaignList[campaignIndex].day_budget_schedule">
                  {{ `${week[i]}：${day / 1000 || '不限'}` }}
                </div>
              </template>
              <span class="primary-text">分日</span>
            </el-tooltip>
            <div v-else>
              单日：{{
                tableData.campaignList[campaignIndex].day_budget / 1000 || '不限'
              }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column align="center" label="状态与操作">
      <el-table-column align="center" label="选择" min-width="60">
        <template #default="{row:{campaignIndex,unitIndex}}">
          <el-checkbox
            @change="childrenChange(campaignIndex)"
            v-model="tableData.campaignList[campaignIndex].unit_list[unitIndex].checked"
            :disabled="tableData.campaignList[campaignIndex].unit_list[unitIndex].disabled"/>
        </template>
      </el-table-column>
      <el-table-column label="提交状态" min-width="126">
        <template #default="{row:{campaignIndex,unitIndex}}">
          <template
            v-if="tableData.campaignList[campaignIndex].unit_list[unitIndex].submit_status === '定时提交'">
            <span class="warning-text">{{ tableData.task_submit_time }}<br>定时提交</span>
          </template>
          <template
            v-else-if="tableData.campaignList[campaignIndex].unit_list[unitIndex].submit_status === '待提交'">
            <span>待提交</span>
          </template>
          <template
            v-else-if="tableData.campaignList[campaignIndex].unit_list[unitIndex].submit_status === '已提交'">
            <span class="primary-text">已提交</span>
          </template>
          <template
            v-else-if="tableData.campaignList[campaignIndex].unit_list[unitIndex].submit_status === '成功'">
            <span class="success-text">成功</span>
          </template>
          <template v-else>
                  <span
                    v-tooltip="tableData.campaignList[campaignIndex].unit_list[unitIndex].fail_reason"
                    class="error-text">{{
                      tableData.campaignList[campaignIndex].unit_list[unitIndex].submit_status
                    }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="80">
        <template #default="{row:{campaignIndex,unitIndex}}">
          <template
            v-if="tableData.campaignList[campaignIndex].unit_list[unitIndex].submit_status === '定时提交'">
            <el-button
              @click="cancelTimer(campaignIndex,unitIndex)"
              v-tooltip="'取消提交后不能再恢复定时任务'"
              :disabled="tableData.campaignList[campaignIndex].unit_list[unitIndex].disabled"
              type="text">
              <span data-type="cancel">取消定时</span>
            </el-button>
          </template>
          <template
            v-else-if="tableData.campaignList[campaignIndex].unit_list[unitIndex].submit_status === '待提交'">
            <el-button
              @click="delTask(campaignIndex,unitIndex)"
              :disabled="tableData.campaignList[campaignIndex].unit_list[unitIndex].disabled"
              type="text">
              <span data-type="delete">删除</span>
            </el-button>
          </template>
          <template v-else>
            <el-button disabled type="text">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column align="center" label="广告组">
      <el-table-column label="广告组名称" min-width="240">
        <template #default="{row:{campaignIndex,unitIndex}}">
          {{ tableData.campaignList[campaignIndex].unit_list[unitIndex].unit_name }}
        </template>
      </el-table-column>
      <el-table-column label="预算" min-width="130">
        <template #default="{row:{campaignIndex,unitIndex}}">
          <el-tooltip
            v-if="tableData.campaignList[campaignIndex].unit_list[unitIndex].day_budget_schedule.length"
            effect="light"
            placement="right"
          >
            <template #content>
              <div
                :key="day"
                class="day-budget-schedule"
                v-for="(day,i) of tableData.campaignList[campaignIndex].unit_list[unitIndex].day_budget_schedule">
                {{ `${week[i]}：${day / 1000 || '不限'}` }}
              </div>
            </template>
            <span class="primary-text">分日</span>
          </el-tooltip>
          <div v-else>
            单日：{{
              tableData.campaignList[campaignIndex].unit_list[unitIndex].day_budget / 1000 || '不限'
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="目标转化出价" min-width="130">
        <template #default="{row:{campaignIndex,unitIndex}}">
          {{ tableData.campaignList[campaignIndex].unit_list[unitIndex].cpa_bid / 1000 }}
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column align="center" label="广告内容">
      <el-table-column label="定向包" min-width="210" prop="target">
        <template #header>
          定向包
          <template v-if="tableData.grouping_rule === 'target'">
            （<span class="primary-text">按定向包分组</span>）
          </template>
        </template>
        <template #default="{row:{campaignIndex,unitIndex}}">
          <!--              <el-tooltip
                          effect="light"
                          append-to-body
                          placement="right">
                          <template #content>
                            <TargetContentDetail
                              :isShowName="true"
                              :data="{
                          ...tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.target,
                          advertiser_id:tableData.advertiser_id
                          }">
                            </TargetContentDetail>
                          </template>
                          <span>
                             {{
            tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.target.template_name
          }}
          <span class="primary-text">详情</span>
        </span>
      </el-tooltip>-->
          <TargetDetail
            placement="left"
            :data="{
                ...tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.target,
                advertiser_id:tableData.advertiser_id
                }"
            :appendToBody="true"
          >
            <div>
                  <span>
                   {{
                      tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.target.template_name
                    }}
                </span>
              <span class="primary-text">详情</span>
            </div>
          </TargetDetail>
        </template>
      </el-table-column>

      <el-table-column label="创意素材" min-width="150" prop="material">
        <template #header>
          创意素材
          <template v-if="tableData.grouping_rule === 'material'">
            （<span class="primary-text">按创意素材分组</span>）
          </template>
        </template>
        <template #default="{row:{campaignIndex,unitIndex}}">
          {{
            tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.material.group_name
          }}
          <el-button type="text" @click="showMaterial(campaignIndex,unitIndex)">详情</el-button>
        </template>
      </el-table-column>

      <el-table-column label="落地页" min-width="210">
        <!--            group?.landing_page && group?.landing_page?.url ?-->
        <template #default="{row:{campaignIndex,unitIndex}}">
          <div
            v-if="tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.landing_page?.id">
            {{
              tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.landing_page.name
            }}
            <el-button
              @click="showLandingPage(campaignIndex,unitIndex)"
              type="text">预览
            </el-button>
          </div>
          <div v-else>无</div>
        </template>
      </el-table-column>
      <el-table-column label="作品广告语" min-width="210" prop="slogan">
        <template #header>
          作品广告语
          <template v-if="tableData.grouping_rule === 'slogan'">
            （<span class="primary-text">按作品广告语分组</span>）
          </template>
        </template>
        <template #default="{row:{campaignIndex,unitIndex}}">
          <el-tooltip
            effect="light"
            placement="left"
          >
            <template #content>
              <div
                :key="str"
                class="day-budget-schedule"
                v-for="str of tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.captions">
                {{ str }}
              </div>
            </template>
            <div>
              {{
                tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.captions_group_name
              }}
              <span class="primary-text">详情</span>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
  <!-- 落地页预览 -->
  <LandingPagePreview ref="landingPagePreviewRef"></LandingPagePreview>
  <!-- 创意素材预览 -->
  <MaterialPreview ref="materialPreviewRef"/>
</template>

<script>
import {
  computed,
  reactive,
  toRefs
} from 'vue'
// 定向包预览组件
import TargetDetail from './components/targetDetail'
// 落地页预览组件
import LandingPagePreview from './components/landingPagePreview';
// 创意素材预览组件
import MaterialPreview from './components/materialPreview';
import {
  debounce,
  cloneDeep
} from 'lodash-es'
// import debounce from "lodash/debounce";

export default {
  name: "CustomTable",
  components: {
    TargetDetail,
    LandingPagePreview,
    MaterialPreview,
  },
  props: {
    rowDataLists: {
      type: Array,
      default: [],
    },
    data: {
      type: Object,
      default: {}
    },
    week: {
      type: Array,
      default: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    }
  },
  emits: ['rowMerge', 'batchCancelHandler', 'delTask'],
  setup(props, {emit}) {
    const state = reactive({
      landingPagePreviewRef: null,
      materialPreviewRef: null,
    })
    const tableData = computed(() => props.data)
    const tableRowLists = computed(() => props.rowDataLists)
    const mergeHanlder = ({row, column, rowIndex, columnIndex}) => {
      // let arr = ['all', 'planInfo', 'target', 'material', 'slogan']
      // let arr = ['all', 'planInfo', state.tableData.grouping_rule]
      /* if (column.property === state.tableData.grouping_rule) {
         if (state.tableData.campaignList[rowIndex]?.unit_list) {
           return [state.tableData.campaignList[rowIndex].unit_list.length, 1]
         }
         return [1, 0]
       }*/
      /*  console.log({
          columnIndex,
          rowIndex,
          row: state.tableRowLists[rowIndex][columnIndex],
          label: column.label,
          prop: column.property,
          ob: state.tableRowLists[rowIndex][columnIndex] || [1, 1],
          data: state.tableData.campaignList[rowIndex]?.unit_list.length ? [state.tableData.campaignList[rowIndex]?.unit_list.length, 1] : [1, 0]
        })*/
      return tableRowLists.value[rowIndex][columnIndex] || [1, 1]
    }
    const showLandingPage = (campaignIndex, unitIndex, customIndex) => {
      let data = tableData.value.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.landing_page
      state.landingPagePreviewRef.show({
        url: data.url,
        name: data.name,
        type: 'iframe'
      })
    }
    const showMaterial = (campaignIndex, unitIndex, customIndex) => {
      let data = tableData.value.campaignList[campaignIndex].unit_list[unitIndex].ks_program_creative.other.material
      state.materialPreviewRef.open(
        [
          ...data.video_list,
          {cover_slogan: data.cover_slogan_list},
          {sticker: data.sticker_list}
        ]
      )
    }
    const parentChange = (bool, campaignIndex) => {
      tableData.value.campaignList[campaignIndex].unit_list.forEach(item => {
        if (!item.disabled) item.checked = bool
      })
      let checked = tableData.value.campaignList[campaignIndex].unit_list.filter(item => item.checked).length
      //半选状态
      tableData.value.campaignList[campaignIndex].indeterminate = !!checked && checked < tableData.value.campaignList[campaignIndex].unit_list.length
    }
    const childrenChange = (campaignIndex) => {
      let checked = tableData.value.campaignList[campaignIndex].unit_list.filter(item => item.checked).length
      let disabled = tableData.value.campaignList[campaignIndex].unit_list.filter(item => !item.disabled).length
      //半选状态
      tableData.value.campaignList[campaignIndex].indeterminate = !!checked && checked < tableData.value.campaignList[campaignIndex].unit_list.length
      tableData.value.campaignList[campaignIndex].checked = checked === disabled
      // tableData.value.campaignList[campaignIndex].checked = tableData.value.campaignList[campaignIndex].unit_list.every(item => item.checked)
    }
    const cancelTimer = (campaignIndex, unitIndex) => {
      let campaignList = tableData.value.campaignList[campaignIndex]
      let unitList = campaignList.unit_list[unitIndex]
      let params = [
        {
          campaign_index: campaignList.campaign_index,
          unit_index: unitList.unit_index
        }
      ]
      emit('batchCancelHandler', false, params)
    }
    const delTask = async (campaignIndex, unitIndex) => {
      let campaignList = tableData.value.campaignList[campaignIndex]
      let unitList = campaignList.unit_list[unitIndex]
      let params = {
        campaign_index: campaignList.campaign_index,
        unit_index: unitList.unit_index
      }
      emit('delTask', params, campaignIndex, unitIndex)
    }
    return {
      ...toRefs(state),
      tableData,
      tableRowLists,
      delTask,
      cancelTimer,
      parentChange,
      childrenChange,
      showLandingPage,
      showMaterial,
      mergeHanlder,
    }
  }
}
</script>

<style scoped lang="scss">
.day-budget-schedule {
  line-height: 24px;
}
</style>
